<template>
    <div style="position: fixed; top: 0; height: 50px; width: 100%; z-index: 999; "><TopBar></TopBar></div>

    <div class="tabs">
        <n-card>
            <div>
                <n-avatar round @click="toOtherUsers(commentInfo.user_id)" size="large" :src=serverUrl+commentInfo.avatar style="float: left; cursor: pointer;" />
                <text style="position: absolute; left: 90px; top: 25px; font-size: 20px;">{{commentInfo.user_name}}</text>
                <text style="position: absolute; margin-top: 10px; right: 30px;">{{commentInfo.created_at}}</text>
                <text style="position: absolute; margin-top: 10px; right: 330px;">共{{replyCount}}条回复</text>
                <n-button @click="showModalModal(commentInfo.id)" ghost style="position: absolute; right: 200px;" color="#7B3DE0">回复</n-button>
            </div>
            <n-divider style="top: 10px;" />
            <div class="article-content">
                <div v-html="commentInfo.content"></div>
            </div>
            <n-divider/>
            <div v-for="(reply, index) in subCommentsInfo" :key="index">
                <div>
                    <n-avatar round @click="toOtherUsers(reply.user_id)" size="large" :src=serverUrl+reply.avatar style="float: left; cursor: pointer;" />
                    <text style="position: absolute; left: 90px; font-size: 20px;">{{reply.user_name}}</text>
                    <text style="position: absolute; left: 200px; font-size: 20px;">回复</text>
                    <n-avatar round @click="toOtherUsers(reply.replied_id)" size="large" :src=serverUrl+reply.replied_avatar style="position: absolute; left: 260px; float: left; cursor: pointer;" />
                    <text style="position: absolute; left: 320px; font-size: 20px;">{{reply.replied_name}}</text>
                    <text style="position: absolute; margin-top: 10px; right: 30px;">{{reply.created_at}}</text>
                    <n-button @click="showModalModal(reply.id)" ghost style="position: absolute; right: 200px;" color="#7B3DE0">回复</n-button>
                </div>
                <n-divider style="top: 10px;" />
                <div class="article-content">
                    <div v-html="reply.content"></div>
                </div>
                <n-divider/>
            </div>
        </n-card>
    </div>

    <n-modal v-model:show="showModal">
        <div style="width: 800px; height: 400px; background: white;">
            <div class="content-container" style="height: 80%;">
                <div class="editor-section">
                    <n-card>
                        <rich-text-editor style="height: 220px;" v-model:modelValue="addComment.content"></rich-text-editor>
                    </n-card>
                </div>
            </div>
            <div style="position: absolute; right: 100px; bottom: 30px;">
                <n-button type="default" @click="closeSubmitModal">
                    取消
                </n-button>
            </div>
            <div style="position: absolute; right: 30px; bottom: 30px;">
                <n-button type="primary" @click="submit">
                    确认
                </n-button>
            </div>                
        </div>
    </n-modal>
</template>

<script setup>
import {ref,reactive,inject, onMounted} from 'vue'
import RichTextEditor from '../components/RichTextEditor.vue'
import TopBar from '../components/TopBar.vue'
import { Star } from "@vicons/ionicons5"
import { StarOutline } from "@vicons/ionicons5"
import {HeartOutline} from '@vicons/ionicons5'
import {Heart} from '@vicons/ionicons5'

import {useRouter, useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

const serverUrl = inject("serverUrl")
const axios = inject("axios")
const message = inject("message")
const dialog = inject("dialog")

const commentInfo = ref({})
const subCommentsInfo = ref([])
const user = ref({})
const userUrl = ref("")
const index = ref(0)
const self = ref(false)
const loginId = ref(0)
const commentsCount = ref(0)
const showModal = ref(false)
const like = ref(false)
const likes = ref([])
const replyCount = ref(0)
const fatherId = ref(0)

const addComment = reactive({
    content: "",
})

onMounted(() => {
    loadComment()
    loadSubComments()
    loadCurrentUser()
})

const showModalModal = (id) => {
    if (loginId.value != 0) {
        showModal.value = true
        fatherId.value = id
    } else {
        message.warning("请先登陆")
        toLogin()
    }
}

const Like = (index) => {
    like.value = true
}

const UnLike = (index) => {
    like.value = false
}

const toLogin = () => {
    router.push("/login")
}

const closeSubmitModal = () => {
    showModal.value = false;
    fatherId.value = 0;
}

const loadCurrentUser= async() => {
    let res = await axios.get("/user")    
    console.log(res)
    if (res.data.code == 200) {
        loginId.value = res.data.data.id
        if (loginId.value == commentInfo.user_id) {
            self.value = true
        }
    }
}

const loadComment = async() => {
    let res = await axios.get("/comment/show/" + route.query.id)
    console.log(res)
    if (res.data.code == 200) {
        commentInfo.value = res.data.data.comment
    }
}

const loadSubComments = async() => {
    let res = await axios.get("reply/list/" + route.query.id)
    console.log(res)
    if (res.data.code == 200) {
        subCommentsInfo.value = res.data.data.replies
        replyCount.value = res.data.data.count
    }
}

const submit = async() => {
    let res = await axios.put("reply/add/" + commentInfo.value.article_id, {
        content: addComment.content,
        father_id: fatherId.value
    })
    console.log(res)
    if (res.data.code = 200) {
        message.success("添加成功")
        ReloadReplies()
        showModal.value = false
    } else {
        message.success("添加失败")
    }
}

const toOtherUser = () => {
    if (user.value.id == loginId.value) {
        router.push({
            path: "/myself",
            query: {
                id: user.value.id
            }
        })   
    } else {
        router.push({
            path: "/others",
            query: {
                id: user.value.id
            }
        })
    }
}

const toOtherUsers = (id) => {
    if (id == loginId.value) {
        router.push({
            path: "/myself",
            query: {
                id: id
            }
        })   
    } else {
        router.push({
            path: "/others",
            query: {
                id: id
            }
        })
    }
}

const ReloadReplies = () => {
    loadSubComments()
}

</script>

<style lang="scss" scoped>
.tabs {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1000px;
    height: auto;
    background: white;  
    box-shadow: 0px 1px 3px #D3D4D8; 
    border-radius: 5px; 
}
.article-content img{
    max-width: 100% !important;
}
.content-container {
    display:flex;
    flex-direction: row;
    margin-top: 25px;
    padding: 20px;
    height: calc(100vh - 75px);
}
.editor-section {
    flex: 2;
    margin-right: 10px;
}
</style>